<template>
  <div class="courseIntroduction">
    <goBack title="课程详情"></goBack>
    <div class="courseIntroduction-title">高帮帮圆梦大学</div>
    <div class="courseIntroduction-subtitle">展人生画卷 划未来蓝图</div>
    <!-- 选择地区/年份 -->
    <div class="box">
      <p class="box-title">[{{info.titile}}]: {{info.subtitle}}</p>
      <div class="courseIntroduction-wrap">
        <div class="left">
          <!-- <div class="left-time">
            <div class="left-time1">时间</div>
            <div class="left-time2">2022年09月23日</div>
          </div> -->
          <div class="left-time">
            <div class="left-time1">主讲老师</div>
            <div class="left-time2">{{info.teacher}}</div>
          </div>
        </div>
        <div class="right">
          <img :src="vipImg"/>  
        </div>
      </div>
    </div>

    <div class="courseIntroduction-detail">
      <div class="title">课程详情<span></span></div>
     <p v-html="info.content"></p>
    </div>
    <div class="btn" @click="goToDetail">咨询报名</div>
  </div>
</template>

<script setup>
import { getCourseDetail } from '../../api/apiList/homePage.js';
import { useRoute,useRouter } from 'vue-router';
import goBack from '../../components/goBack.vue';
import vipImg from '../../assets/images/vip.png'
import { onMounted, ref } from 'vue';
const route = useRoute();
const router = useRouter();
const id = route.query.id;
let info = ref({});
onMounted(async () => {
  // 获取列表数据 0招生信息 1大学推荐
    await getCourseDetail(id).then((res) => {
    const { result } = res;
    info.value = result;
  });
  
});

const goToDetail = (index) => {
  router.push({ path: '/connect' });
};
</script>

<style lang="less" scoped>
.courseIntroduction {
  background-image: url('../../assets/images/enrollment-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .box {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    .box-title {
      overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2; 
    }
  }
  p {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 26px;
    text-align: center;
    padding: 0 36px;
    margin-bottom: 21px;
  }
  .courseIntroduction-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    .left {
      .left-time {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .left-time1 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          margin-right: 12px;
        }
        .left-time2 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
      }
    }
    .right {
      img {
        width: 57px;
        height: 14px;
      }
    }
  }
  .courseIntroduction-detail {
    margin-top: 16px;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
      margin-bottom: 16px;
      position: relative;
      text-align: center;
      span {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 72px;
        margin-left: -36px;
        height: 6px;
        z-index: -1;
        background: linear-gradient(360deg, #989aff 0%, #bac8ff 100%);
      }
    }
  }
  .btn {
    width: 414px;
    height: 55px;
    background: linear-gradient(119deg, #62A7F1 0%, #A781F1 100%);
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 55px;
    position: fixed;
    bottom: 41px;
  }
  .courseIntroduction-title {
    padding: 0 18px;
    font-size: 21px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000493;
    line-height: 29px;
    letter-spacing: 1px;
    padding-top: 127px;
    margin-bottom: 4px;
  }
  .courseIntroduction-subtitle {
    padding: 0 18px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4347d3;
    line-height: 20px;
    letter-spacing: 4px;
    margin-bottom: 46px;
  }
  .courseIntroduction-wrap-title {
    padding: 0 18px;
    display: flex;
    align-items: center;
    span {
      width: 3px;
      height: 17px;
      background: #8487e3;
      border-radius: 2px;
      margin-right: 3px;
    }
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 22px;
    letter-spacing: 4px;
    margin-bottom: 16px;
  }
  .schools-wrap {
    padding: 0 18px;
  }
}
.introduce-wrap {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15px;
}
// <div class="courseIntroduction">
//     <div class="courseIntroduction-title">高帮帮圆梦大学</div>
//     <div class="courseIntroduction-subtitle">展人生画卷 划未来蓝图备份</div>
//     <!-- 选择地区/年份 -->
//     <div class="courseIntroduction-wrap-title"><span></span>推荐高校</div>
//     <div class="schools-wrap" v-for="item in schools" :key="item">
//       <schoolProject></schoolProject>
//     </div>
//   </div>
</style>
